<template>
    <div class="dzzfxt-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
        <template v-if="item.position === 'banner'">
            <img :src="item.image_url" alt="">
        </template>
    </div>
    <div class="dzzfxt">
        <div class="dzzfxt-content">
            <div class="dzzfxt-box1">
                <div class="dzzfxt-box1-img">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[0].image_url" alt="">
                    </template>
                </div>
                <div class="dzzfxt-box1-article">
                    <div class="box1-article-title">中国银行收款平台</div>
                    <div class="article-desc">
                        <strong>无需第三方介入 | 资金安全可靠</strong>
                    </div>
                    <div class="article-content">
                        <p> 与中国银行合作，采用中行收款平台，系统安全稳定，租金直接到账，可在“中国银行商户服务网站”直接查询（PC端、手机端均可），安全便捷，无需第三方介入。交易查询方式多样，如支付宝/微信当日交易查询、历史交易查询等功能，满足不同商户的需求。
                        </p>
                    </div>
                </div>
            </div>
            <el-divider />
            <div class="dzzfxt-box1">
                <div class="dzzfxt-box1-article">
                    <div class="box1-article-title">中国银行收款平台</div>
                    <div class="article-desc">
                        <strong>无需第三方介入 | 资金安全可靠</strong>
                    </div>
                    <div class="article-content">
                        <p> 与中国银行合作，采用中行收款平台，系统安全稳定，租金直接到账，可在“中国银行商户服务网站”直接查询（PC端、手机端均可），安全便捷，无需第三方介入。交易查询方式多样，如支付宝/微信当日交易查询、历史交易查询等功能，满足不同商户的需求。
                        </p>
                    </div>
                </div>
                <div class="dzzfxt-box1-img">
                    <template v-if="imgArr1.length > 0">
                        <img :src="imgArr1[0].image_url" alt="">
                    </template>
                </div>
            </div>
            <el-divider />
            <div class="dzzfxt-box2">
                <div class="dzzfxt-box2-title">
                    <strong style="font-weight: normal;">合作伙伴</strong>
                </div>
                <div class="dzzfxt-box2-partner" v-if="imgArr2.length > 0">
                    <template v-for="(item, index) in imgArr2" :key="index">
                        <img :src="item.image_url" alt="">
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>

import { ref, onMounted } from 'vue'
import { getDzzfxtList } from '@/api/rjxt'

const rjxtList = ref([])
const imgArr = ref([])
const imgArr1 = ref([])
const imgArr2 = ref([])

onMounted(() => {
    getDzzfxtList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
        imgArr1.value = rjxtList.value.filter(item => item.position === 'content_01')
        imgArr2.value = rjxtList.value.filter(item => item.position === 'content_02')
    })
})

</script>

<style scoped>
/* 媒体查询 手机 */
@media screen and (max-width: 768px) {

    .dzzfxt-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .dzzfxt-box2 {
        display: flex;
        max-width: 1200px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .dzzfxt-box2-title {
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        margin-top: 50px;
    }

    .dzzfxt-box2-partner {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }

    .dzzfxt-box2-partner img {
        width: 200px;
        height: 200px;
        margin-top: 30px;
    }

    .dzzfxt-box1-line {
        width: 100%;
        height: 1px;
        background-color: #000;
    }

    .dzzfxt-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
    }

    .dzzfxt-box1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 380px;
        max-width: 1200px;
        margin-top: 30px;
    }

    .dzzfxt-box1-img {
        width: 400px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .dzzfxt-box1-img img {
        max-width: 400px;
        max-height: 428px;
        margin-left: 30px;
    }

    .dzzfxt-box1-article {
        width: 380px;
        height: 285px;
        /* margin-top: 80px; */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box1-article-title {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        font-weight: normal;
    }

    .article-desc {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 24px;
        color: #b83636;

        strong {
            font-weight: normal;
        }
    }

    .article-content {
        padding: 0 20px;
        line-height: 1.75;
        font-size: 16px;
    }
}

/* 媒体查询 平板 */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    .dzzfxt-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .dzzfxt-box2 {
        display: flex;
        width: 1200px;
        max-width: 1200px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .dzzfxt-box2-title {
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        margin-top: 50px;
    }

    .dzzfxt-box2-partner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        margin-top: 30px;
    }

    .dzzfxt-box2-partner img {
        width: 200px;
        height: 200px;
        padding: 0 30px;
    }


    :deep(.el-divider--horizontal) {
        width: 1200px;
    }

    .dzzfxt-box1-line {
        width: 100%;
        height: 1px;
        background-color: #000;
    }

    .dzzfxt-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
    }

    .dzzfxt-box1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 800px;
        max-width: 1200px;
        height: 400px;
    }

    .dzzfxt-box1-img {
        width: 400px;
        height: 428px;
    }

    .dzzfxt-box1-img img {
        max-width: 100%;
        height: auto;
        margin-left: 30px;
        margin-top: 73px;
    }

    .dzzfxt-box1-article {
        width: 400px;
        height: 428px;
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box1-article-title {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        font-weight: normal;
    }

    .article-desc {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 24px;
        color: #b83636;

        strong {
            font-weight: normal;
        }
    }

    .article-content {
        padding: 0 20px;
        line-height: 1.75;
        font-size: 16px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1919px) {
    .dzzfxt-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }


    .dzzfxt-box2 {
        display: flex;
        width: 1200px;
        max-width: 1200px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .dzzfxt-box2-title {
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        margin-top: 50px;
    }

    .dzzfxt-box2-partner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        margin-top: 30px;
    }

    .dzzfxt-box2-partner img {
        height: 200px;
        padding: 0 90px;
    }


    :deep(.el-divider--horizontal) {
        width: 1200px;
    }

    .dzzfxt-box1-line {
        width: 100%;
        height: 1px;
        background-color: #000;
    }

    .dzzfxt-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
        padding: 0 150px;
    }

    .dzzfxt-box1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 1200px;
        max-width: 1200px;
        height: 400px;
    }

    .dzzfxt-box1-img {
        width: 600px;
        height: 428px;
    }

    .dzzfxt-box1-img img {
        max-width: 100%;
        height: auto;
        margin-left: 140px;
        margin-top: 73px;
    }

    .dzzfxt-box1-article {
        width: 400px;
        height: 428px;
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box1-article-title {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        font-weight: normal;
    }

    .article-desc {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 24px;
        color: #b83636;

        strong {
            font-weight: normal;
        }
    }

    .article-content {
        padding: 0 20px;
        line-height: 1.75;
        font-size: 16px;
    }
}

/* 媒体查询 电脑 */
@media screen and (min-width: 1920px) {
    .dzzfxt-banner {
        width: 100%;
        height: auto;

        img {
            width: 100%;
            height: auto;
        }
    }

    .dzzfxt-box2 {
        display: flex;
        width: 1200px;
        max-width: 1200px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .dzzfxt-box2-title {
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        margin-top: 50px;
    }

    .dzzfxt-box2-partner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        margin-top: 30px;
    }

    .dzzfxt-box2-partner img {
        height: 200px;
        padding: 0 90px;
    }


    :deep(.el-divider--horizontal) {
        width: 1200px;
    }

    .dzzfxt-box1-line {
        width: 100%;
        height: 1px;
        background-color: #000;
    }

    .dzzfxt-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
        padding: 0 150px;
    }

    .dzzfxt-box1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 1200px;
        max-width: 1200px;
        height: 400px;
    }

    .dzzfxt-box1-img {
        width: 600px;
        height: 428px;
    }

    .dzzfxt-box1-img img {
        max-width: 100%;
        height: auto;
        margin-left: 140px;
        margin-top: 73px;
    }

    .dzzfxt-box1-article {
        width: 400px;
        height: 428px;
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box1-article-title {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 34px;
        font-weight: normal;
    }

    .article-desc {
        padding: 0 17px;
        line-height: 1.75;
        text-align: center;
        font-size: 24px;
        color: #b83636;

        strong {
            font-weight: normal;
        }
    }

    .article-content {
        padding: 0 20px;
        line-height: 1.75;
        font-size: 16px;
    }
}
</style>